<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		#aa{
			width: 300px;
			height: 300px;
			background-color: aqua;
		}
		#bb{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
	<body>
		<div id="aa" onmouseenter="JinRu();" onmouseleave="LiKai();" onmousemove="YiDo();">
			<button type="button" id='but1' onclick="DanJi();">按钮1</button>
			<button type="button" id='but2' >按钮2</button>
			<button type="button" id='but3' >按钮3</button><br />
			<button type="button" id='but4' onclick="TianJia();">为按钮3添加监听器</button>
			<button type="button" id='but5' onclick="ShanChu();">为按钮3删除监听器</button>
			<h3 align="center">登入页面</h3><br />
			用户名：<input type="text" name="" id="username" value="" onblur="userko();" onfocus="userhuo();"/><br />
			密  码：<input type="text" name="" id="userpwd" value="" onfocus="pwdhou();" onblur="pwdko();"/><br />
			<button type="button" id='but6' onclick="TiJiao();">提交</button>
		</div>
		<div id="bb" >
			<br />
			<br />
			<br />
			<br />
			<br />
			<button type="button" onclick="add();">添加监听器</button>
			<button type="button" onclick="remove();">清除监听器</button>
		</div>
	</body>
	<script type="text/javascript">
		function TiJiao(){
			if(document.getElementById('username').value == ''){
				console.log('用户名为空');
			}
			if(document.getElementById('userpwd').value == ''){
				console.log('密码为空');
			}
			if(document.getElementById('username').value == '' && document.getElementById('userpwd').value == ''){
				console.log('用户名和密码为空');
			}
			if(document.getElementById('username').value != '' && document.getElementById('userpwd').value != ''){
				console.log('提交成功')
			}
		}
		function pwdko(){
			if(document.getElementById('userpwd').value==''){
				alert('没有输入密码');
			}else{
				var ll = document.getElementById('userpwd').value;
				console.log('用户输入密码是：'+ll)
			}
		}
		function pwdhou(){
			console.log('正在输入密码...');
		}
		function userhuo(){
			console.log('正在输入用户名...');
		}
		function userko(){
			if(document.getElementById('username').value==''){
				alert('没有输入用户名');
			}else{
				var oo = document.getElementById('username').value;
				console.log('用户输入了：'+oo);
			}
		}
		function TianJia(){
			document.getElementById('but3').addEventListener('click',DanJi);
		}
		function ShanChu(){
			document.getElementById('but3').removeEventListener('click',DanJi);
		}
		function JinRu(){
			console.log('进入页面');
			document.getElementById('aa').style.backgroundColor='chartreuse';
		}
		function LiKai(){
			console.log('离开页面');
			document.getElementById('aa').style.backgroundColor='aqua';
		}
		function YiDo(){
			console.log('鼠标在页面移动');
		}
		function DanJi(){
			console.log('我被单击啦')
		}
		document.getElementById('but2').onclick=DanJi;
		function gg(){
			console.log('我动了');
		}
		function add(){
			document.getElementById('bb').addEventListener('mousemove',gg)
		}
		function remove(){
			document.getElementById('bb').removeEventListener('mousemove',gg)
		}
		
		
	</script>
</html>
		<!-- 
		         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->